<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="left" :form="form">
          <a-row :gutter="48">

            <template v-if="!advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="模糊搜索">
                  <a-input  placeholder="" v-model="search" @change="changescale"/>
                </a-form-item>
              </a-col>
            </template>

            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="文件编号:">
                  <a-input placeholder="请输入" v-decorator="['fileNo']" @change="changescale"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="文件名称:">
                  <a-input placeholder="" v-decorator="['fileName']" @change="changescale"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="文件类型:">
                  <a-select  placeholder="请选择" v-decorator="['type']" @change="changescale">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in FileType" :value="item.value">{{item.label}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="操作系统:">
                  <a-select  placeholder="请选择" v-decorator="['adaptationOs']" @change="changescale">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in Ostype" :value="item.value">{{item.label}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="文件来源:">
                  <a-select  placeholder="请选择" v-decorator="['patchTypes']" @change="changescale">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in FileSource" :value="item.value">{{item.label}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="发布时间:">
                  <a-date-picker  v-decorator="['publishingTime ']" style="width: 100%;" @change="changescale"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="(!advanced && 8) || 24" :sm="24">
                  <span
                    class="table-page-search-submitButtons"
                    :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
                  >
                    <a-button type="primary" @click="seachlist()">查询</a-button>
                    <a-button style="margin-left: 8px" @click="resetform()">重置</a-button>

                    <a @click="toggleAdvanced" style="margin-left: 8px">
                      {{ advanced ? '收起' : '展开' }}
                      <a-icon :type="advanced ? 'up' : 'down'" />
                    </a>
                  </span>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px;margin-bottom: 20px;">
            <a-button type="primary" style="margin-left: 15px" @click="addfile()">上传</a-button>
            <a-button type="primary" style="margin-left: 15px" @click="modifyfile()">修改</a-button>
            <a-button type="primary" style="margin-left: 15px" @click="deletefile()">删除</a-button>
            <a-button type="primary" style="margin-left: 15px" @click="setSatus()">设置执行脚本</a-button>
          </a-row>
        </a-form>
      </div>

      <a-row>
        <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :pagination="tablepagination"  @change="tablechange">
<!--          <template slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
<!--            {{record.used}}-->
<!--          </template>-->
          <template slot="adaptationOs" slot-scope="text, record">
            {{OstypeMap[text.toString()]}}
          </template>
          <template slot="type" slot-scope="text, record">
            {{FileTypeMap[text.toString()]}}
          </template>
          <template slot="size" slot-scope="text, record">
            {{transsize(text)}}
          </template>
          <template slot="fileSource" slot-scope="text, record">
            {{FileSourceMap[text.toString()]}}
          </template>
          <template slot="status" slot-scope="text, record">
            <a-tag v-if="text == 1" color="green">{{MarkTypeMap[text.toString()]}}</a-tag>
            <a-tag v-if="text == 0" color="red">{{MarkTypeMap[text.toString()]}}</a-tag>
          </template>

          <template slot="publishingTime" slot-scope="text, record">
            {{text.replace('T',' ')}}
          </template>
        </a-table>
      </a-row>
    </a-card>
    <Detailmodal ref="detailmodal"></Detailmodal>
    <Mymodal ref="mymodal"></Mymodal>
  </page-header-wrapper>
</template>

<script>
  import Detailmodal from '@/components/mycomp/detailmodal'
  import Mymodal from '@/components/mycomp/mymodal.vue'
  import {getfilelist,savefile,deletefile} from '@/api/patch'
  import {DangerLevel,DangerLevelMap,Ostype,OstypeMap,PatchType,PatchTypeMap,MarkType,MarkTypeMap,TrueFalse,FileSource,FileType,FileTypeMap,FileSourceMap,OnOff} from '../../utils/constant'
  import TreeSelect from 'ant-design-vue/es/tree-select'
  import { deleteassets } from '@/api/assets'
  export default {
    name: "library",
    components: { Detailmodal,Mymodal,TreeSelect },
    data(){
      return{
        FileSource,
        OnOff,
        TrueFalse,
        FileType,
        FileTypeMap,
        FileSourceMap,
        MarkType,
        MarkTypeMap,
        PatchType,
        PatchTypeMap,
        DangerLevel,
        DangerLevelMap,
        Ostype,
        OstypeMap,
        form:this.$form.createForm(this, { name: 'pacthlib' }),
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        advanced:false,
        rowSelection:{
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectarray = selectedRows
            this.changescale()
          },
          onSelect: (record, selected, selectedRows) => {
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
          },
        },
        tablepagination:{
          showTotal:(total, range) => {return `共搜索到${total}条数据`},
          current:1,
          total:0
        },
        columns:[
          {
            title:'文件编号',
            key:'fileNo',
            dataIndex: 'fileNo',
            width:200,
            fixed: 'left'
          },
          {
            title:'文件名称',
            key:'fileName',
            dataIndex: 'fileName',
            width:150,
            fixed: 'left'

          },
          {
            title:'版本',
            key:'version',
            dataIndex: 'version',
          },
          {
            title:'补丁类型',
            key:'type',
            dataIndex: 'type',
            scopedSlots: { customRender: 'type' },
          },
          {
            title:'适用操作系统',
            key:'adaptationOs',
            dataIndex: 'adaptationOs',
            width:150,
            scopedSlots: { customRender: 'adaptationOs' },
          },

          {
            title:'大小',
            key:'size',
            dataIndex: 'size',
            scopedSlots: { customRender: 'size' },
          },
          {
            title:'文件用途',
            key:'used',
            dataIndex: 'used',
            ellipsis: true,
            width:150,
          },
          {
            title:'脚本状态',
            key:'status',
            width:100,
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' },
          },
          {
            title:'文件来源',
            key:'fileSource',
            dataIndex: 'fileSource',
            width:100,
            scopedSlots: { customRender: 'fileSource' },
          },
          {
            title:'源文件名称',
            key:'sourceFileName',
            width:150,
            dataIndex: 'sourceFileName',
          },
          {
            title:'发布时间',
            key:'publishingTime',
            dataIndex: 'publishingTime',
            width:200,
            scopedSlots: { customRender: 'publishingTime' },
          }
        ],
        data:[],
        search:'',
        selectarray:null,
        treedata:[],
      }
    },
    mounted() {
      this.getfilelistfunc()
    },
    methods:{
      seachlist(){
        this.tablepagination.current=1;
        this.getfilelistfunc()
      },
      tablechange(pagination){
        this.tablepagination = pagination
        this.getfilelistfunc()
      },
      transsize(size){
        console.log(size)
        if(!size){
          return '0KB'
        }else if(size<1024){
          return size+'B'
        }else if(size<1024*1024){
          return Math.floor(size/1024) + 'KB'
        }else{
          return Math.floor(size/1024/1024) + 'M'
        }
      },
      addfile(){
        let modalinfo = {
          title:'上传文件',
          list:[
            {name:'fileName',label:'文件名称',require:true,type:'input',errortip:'请输入名称'},
            {name:'version',label:'版本',require:true,type:'input',errortip:'请输入版本'},
            {name:'adaptationOs',label:'适配操作系统',require:true,type:'select',selectdata:this.Ostype,errortip:'请选择操作系统'},
            {name:'used',label:'文件用途',type:'textarea'},
            {name:'fileSource',label:'文件来源',require:true,type:'select',selectdata:this.FileSource,errortip:'请选择文件来源'},
            {name:'fileUrl',label:'上传文件',require:true,type:'upload',errortip:'请上传文件'},
          ],
          ok:this.createokfun.bind(this),
        }
        this.$refs.mymodal.showmodal(modalinfo)
      },

      createokfun(params){
        savefile(params).then(res=>{
          this.getfilelistfunc()
        })
      },


      getfilelistfunc(){
        let params = {}
        params.pageNo = this.tablepagination.current
        params.pageSize = 10
        if(this.advanced){
          Object.assign(params,this.form.getFieldsValue())
        }else{
          params.search = this.search
        }
        getfilelist(params).then(res=>{
          let record = res.data.records
          for(let i in record){
            record[i].key =record[i].id
          }
          this.data = record
          this.tablepagination.total = res.data.total
          this.changescale()
        })
      },

      modifyfile(){
        if(!this.selectarray || this.selectarray.length == 0){
          this.$message.info('请先选择一条数据')
          return
        }
        if(this.selectarray && this.selectarray.length >1){
          this.$message.info('此操作只支持一条数据')
          return
        }

        let item = this.selectarray[0]

        let modalinfo = {
          title:'上传文件',
          list:[
            {name:'fileName',label:'文件名称',require:true,type:'input',errortip:'请输入名称',value:item.fileName},
            {name:'version',label:'版本',require:true,type:'input',errortip:'请输入版本',value:item.version},
            {name:'adaptationOs',label:'适配操作系统',require:true,type:'select',selectdata:this.Ostype,errortip:'请选择操作系统',value:item.adaptationOs},
            {name:'used',label:'文件用途',type:'textarea',value:item.used},
            {name:'fileSource',label:'文件来源',require:true,type:'select',selectdata:this.FileSource,errortip:'请选择文件来源',value:item.fileSource.toString()},
            {name:'fileUrl',label:'上传文件',require:true,type:'upload',errortip:'请上传文件',value:item.fileUrl,sourceFileName:item.sourceFileName,size:item.size},
          ],
          ok:this.createokfun.bind(this),
          moreinfo:{
            id:item.id
          }
        }
        this.$refs.mymodal.showmodal(modalinfo)
      },

      deletefile(){
        if(!this.selectarray || this.selectarray.length == 0){
          this.$message.info('请先选择一条数据')
          return
        }
        let id = this.getids()

        this.$confirm({
          title: '是否确认删除数据?',
          okText: '是',
          okType: 'danger',
          cancelText: '否',
          onOk:()=> {
            deletefile({id:id}).then(res=>{
              this.$message.success('操作成功')
              this.getfilelistfunc()
            })
          }
        });

      },

      setSatus(){
        if(!this.selectarray || this.selectarray.length == 0){
          this.$message.info('请先选择一条数据')
          return
        }
        let id = this.getids()

        let modalinfo = {
          title:'设置执行脚本',
          list:[
            {name:'status',label:'是否设置',require:true,type:'select',errortip:'请选择',selectdata:this.OnOff},
          ],
          ok:this.setstatusfunc.bind(this),
          moreinfo:{
            inventoryIds:id
          }
        }
        this.$refs.mymodal.showmodal(modalinfo)
      },

      setstatusfunc(){

      },
      resetform(){
        this.form.resetFields()
        this.search = ''
      },

      getids(){
        let arry = []
        for(let i in this.selectarray){
          arry.push(this.selectarray[i].id)
        }
        let id = arry.join(',')
        return id
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
        this.changescale()
      },
      changescale(){
        let n = document.createElement('div')
        n.id = 'abc'
        n.setAttribute('style',' position: fixed;z-index: 999;left: 0;top:0;width: 100%;height: 100%;background-color: #fff')
        document.body.append(n)
        document.getElementById('app').style.transform = `scale(1)`
        document.getElementById('app').style.transformOrigin = `0 0`
        document.getElementById('app').style.height = `100%`
        setTimeout(()=>{
          document.getElementById('abc').remove()
          var scale = (window.innerWidth-20)/1900
          document.getElementById('app').style.transform = `scale(${scale})`
          document.getElementById('app').style.transformOrigin = `0 0`
          document.getElementById('app').style.height = `${100/scale}%`
        },0)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~ant-design-vue/es/tree-select/style/index.less";
</style>